<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap Chinese Region | 基于bootstrap的中国地区（行政区）选择器</title>
	<link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
	<link rel="stylesheet" href="lib/bootstrap-chinese-region/bootstrap-chinese-region.css">
</head>
<body>
	
	<div class="container">
		<h1>Bootstrap Chinese Region</h1>
		<p>基于bootstrap的中国地区（行政区）选择器</p>
		<h2>隐藏id不在input显示的处理方式：</h2>
		<div class="row">
			<div class="col-md-6">
				<form action="">
					<div class="form-group">
						<label for="address">地区</label>
						<div class="bs-chinese-region flat dropdown" data-min-level="1" data-max-level="3" data-def-val="[name=address]">
							<input type="text" class="form-control" id="address" placeholder="选择你的地区" data-toggle="dropdown" readonly="">
							<input type="hidden" class="form-control" name="address" value="440103">
							<div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
								<div>
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active"><a href="#province" data-next="city" role="tab" data-toggle="tab">省份</a></li>
										<li role="presentation"><a href="#city" data-next="district" role="tab" data-toggle="tab">城市</a></li>
										<li role="presentation"><a href="#district" data-next="street" role="tab" data-toggle="tab">县区</a></li>
									</ul>
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane active" id="province">--</div>
										<div role="tabpanel" class="tab-pane" id="city">--</div>
										<div role="tabpanel" class="tab-pane" id="district">--</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<p><button class="btn btn-default" type="submit">提交</button></p>
				</form>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="lib/jquery/jquery.js"></script>
	<script type="text/javascript" src="lib/bootstrap/bootstrap.js"></script>
	<script type="text/javascript" src="lib/bootstrap-chinese-region/bootstrap-chinese-region.js"></script>
	<script type="text/javascript">
		$.getJSON('lib/bootstrap-chinese-region/sql_areas.json',function(data){
			
			for (var i = 0; i < data.length; i++) {
				var area = {id:data[i].id,name:data[i].cname,level:data[i].level,parentId:data[i].upid};
				data[i] = area;
			}

			$('.bs-chinese-region').chineseRegion('source',data).on('completed.bs.chinese-region',function(e,areas){
				$(this).find('[name=address]').val(areas[areas.length-1].id);
			});
		});
	</script>

</body>
</html>